<template>
  <div class="groupChoose">
    <!-- 表格分组值选择组件 -->
    <!-- @mouseleave="closeNo" -->
    <div
      :style="{
        left:leftDom+'px',
        top:topDom+'px',
        padding:showBool?'.1rem 0 .2rem':'0',
        height:showBool?computedHeight:0
    }"
      class="select"
    >
      <div class="query div">
        <el-input @clear="searchOptions" size="small" placeholder="请输入内容" v-model="query" clearable>
          <i @click="searchOptions" class="el-icon-search el-input__icon" slot="suffix"></i>
        </el-input>
      </div>
      <el-checkbox-group class="scrool" v-model="checked" v-if="options.length>0">
        <el-checkbox class="option div" v-for="(_i) in options" :label="_i" :key="_i">{{_i}}</el-checkbox>
      </el-checkbox-group>
      <div class="btn div">
        <el-checkbox @change="checkedAll" :size="size" v-model="all">全选</el-checkbox>
        <el-button @click="sure" :size="size" type="primary">确定</el-button>
      </div>
    </div>
    <div :style="{}" class="select zhanwei">
      <div class="query div"></div>
      <el-checkbox-group class="scrool" v-model="checked" v-if="options.length>0">
        <el-checkbox class="option div" v-for="(_i) in options" :label="_i" :key="_i">{{_i}}</el-checkbox>
      </el-checkbox-group>
      <div class="btn div"></div>
    </div>
    <span class="show" @click="showSelect($event)">
      {{name}}
      <i :class="icon"></i>
    </span>
  </div>
</template>
<script>
export default {
  name: "groupChoose",
  props: {
    icon: {
      type: String,
      default: () => {
        return "el-icon-s-operation";
      }
    },
    name: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 可选值
    optionsArr: {
      type: Array,
      default: () => {
        return [];
      }
    },
    size: {
      type: String,
      default: () => {
        return "mini";
      }
    },
    // 选中值
    checkedArr: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: {},
  data() {
    return {
      showBool: false, // 分组下拉框显示开关
      options: [],
      checked: [],
      query: "",
      all: false,
      topDom: 0,
      leftDom: 0
    };
  },
  watch: {
    checked: {
      handler(newValue) {
        if (newValue.length == this.options.length) {
          this.all = true;
        } else {
          this.all = false;
        }
      },
      deep: true
    }
  },
  methods: {
    closeNo() {
      this.query = "";
      this.options = JSON.parse(JSON.stringify(this.optionsArr));
      this.checked = JSON.parse(JSON.stringify(this.checkedArr));
      this.showBool = false;
    },
    // 搜索函数
    searchOptions() {
      let _arr = [];
      this.optionsArr.map(_i => {
        if (_i.indexOf(this.query) !== -1) {
          _arr.push(_i);
        }
      });
      this.checked = [];
      this.options = JSON.parse(JSON.stringify(_arr));
    },
    // 展开下拉框checked
    showSelect(e) {
      if (this.showBool) {
        this.closeNo();
        return;
      }
      try {
        let height = e.currentTarget.previousElementSibling.getBoundingClientRect()
          .height;
        let top =
          e.currentTarget.getBoundingClientRect().top +
          e.currentTarget.offsetHeight +
          10;
        top =
          document.body.clientHeight - top < height
            ? document.body.clientHeight - height
            : top;
        this.topDom = top - 10;
        this.leftDom =
          e.currentTarget.getBoundingClientRect().left +
          parseFloat(e.currentTarget.getBoundingClientRect().width / 2) -
          20;
        this.showBool = true;
      } catch (err) {
        console.log(err, "距离计算失误");
      }
    },
    checkedAll(v) {
      if (v) {
        this.checked = JSON.parse(JSON.stringify(this.options));
      } else {
        this.checked = [];
      }
    },
    sure() {
      this.showBool = false;
      this.$emit("change", this.checked);
    }
  },
  beforeCreate() {},
  created() {
    this.options = JSON.parse(JSON.stringify(this.optionsArr));
    this.checked = JSON.parse(JSON.stringify(this.checkedArr));
  },
  beforeMount() {},
  mounted() {},
  computed: {
    computedHeight() {
      // .8  .5   3  .4
      let num = 0.8 + 0.5 + 0.4;
      this.options.map(() => {
        num += 0.4;
      });
      if (num >= 4.3) {
        num = 4.3;
      }
      return num + "rem";
    }
  }
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.groupChoose {
  position: relative;
  .show {
    cursor: pointer;
    i {
      margin-left: 0.1rem;
    }
  }
  .select {
    overflow: hidden;
    transition: height ease 0.5s;
    color: #475669 !important;
    font-size: 0.14rem;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: fixed;
    box-shadow: 0 3px 8px #e4e7ed;
    outline: none;
    border-radius: 4px;
    background-color: #fff;
    z-index: 2021;
    margin: 0 auto;
    display: inline-block;
    font-weight: normal;
    min-width: 3rem;
    max-width: 5rem;
    .div {
      // min-width: 1rem;
      padding: 0.02rem;
      display: flex;
      align-items: center;
    }
    .btn {
      height: 0.8rem;
      display: flex;
      width: 90%;
      margin: 0 auto;
      align-items: center;
      justify-content: space-between;
      .el-button {
        transform: scale(0.8, 0.8);
      }
    }
    .scrool {
      max-height: 3rem;
      overflow-y: scroll;
      width: 90%;
      margin: 0 auto;
      scrollbar-width: none; /*Firefox*/
      -ms-overflow-style: none; /*IE10+*/
      .option {
        height: 0.4rem;
        line-height: 0.4rem;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .el-checkbox {
          font-weight: 400 !important;
        }
      }
      .option:hover {
        background: #f2f8ff;
      }
    }
    .scrool::-webkit-scrollbar {
      display: none;
    }
    .query {
      height: 0.5rem;
      i {
        cursor: pointer;
      }
      .el-input {
        width: 100%;
        border: none;
      }
    }
  }
  .zhanwei {
    opacity: 1 !important;
    visibility: hidden;
    z-index: -10;
  }
}
</style>
